<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
			运动框架对哪些属性能够作用： 具有等级关系(从小到大依次递增,从大到小依次递减)的值

				width   height  fontSize  opacity  margin  padding  borderWidth: 值
				1 2 3 4 5 .....
				display : block  inline-block  none

				backgroundColor : rgb(0,0,0)
		-->
    <style>
        div{
            height: 100px;width: 100px;float: left;
            background: red;border:2px solid blue;
        }
        #box1{
            margin-left: 100px;opacity: 0.3;
        }
    </style>
</head>
<body>

    <div id="box"></div>
    <div id="box1"></div>

    <script type="text/javascript">
        var box = document.getElementById("box");



        //改变边框宽度
        box.onmouseover = function () {
            startMove(box,"borderWidth",100);
        }
        box.onmouseout = function () {
            startMove(box,"borderWidth",1);
        }
        //改变透明度
        box1.onmouseover = function () {
            startMove(box1,"opacity",100);
        }
        box1.onmouseout = function () {
            startMove(box1,"opacity",30);
        }

        var timer = null;
        function startMove(obj,attr,target) {
            clearInterval(timer);
            timer = setInterval(function () {
                //因为透明度没有px，所以要单独拿出来
                if(attr=="opacity"){
                    var cssVal = parseFloat(getCss(obj,"opacity"))*100;
                }else{
                    var cssVal = parseInt(getCss(obj,attr));
                }
                //变速运动
                var speed = (target-cssVal)/10;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if( cssVal==target){
                    clearInterval(timer);
                }else{
                    if(attr=="opacity"){
                        cssVal = cssVal +speed;
                        obj.style.opacity = cssVal/100;
                    }else {
                        obj.style[attr] = cssVal +speed +"px";
                    }
                }
            },30);
        }
        /*
                         getCss ： 获取内联和外联样式,还可以获取行间样式
                         obj : 获取的对象
                         css : 获取对象上属性
                     * */
        function getCss(obj,css) {
            return getComputedStyle(obj, null)[css]
        }






    </script>

</body>
</html>